import { ScrollView, View, StyleSheet, TextInput, Button} from "react-native";
import { BarChart } from "react-native-gifted-charts";
import { Tester, TestCase } from "@rnoh/testerino";
import { axesProps } from '../commonProps'
import { useState } from 'react'

export default function () {
  const data = [
    { value: 50, label: '50' },
    { value: 60, label: '60', },
    { value: 70, label: '70', },
    { value: 80, label: '80', },
    { value: 90, label: '90', },
    { value: 100, label: '100' },
    { value: 110, label: '110' }];

  const barChartAxesPro = [
    ...axesProps,
    {
      data: [
        { value: 50, label: '50', labelTextStyle: { fontSize: 14, backgroundColor: 'red' }, labelWidth: 20 },
        { value: 60, label: '60', labelTextStyle: { fontSize: 14, backgroundColor: 'red' }, labelWidth: 40 },
        { value: 70, label: '70', },
        { value: 80, label: '80', },
        { value: 90, label: '90', },
        { value: 100, label: '100' },
        { value: 110, label: '110' }]
    },
    { labelsDistanceFromXaxis: 10 }, { labelsDistanceFromXaxis: 20 },

  ]

  const [selectedIndex, setSelectedIndex] = useState(null)
  const [searchValue, setSearchValue] = useState('')
  const [layoutList, setLayoutList] = useState(barChartAxesPro)

  const handleSearch = (value) => {
    const index = barChartAxesPro.findIndex(item => JSON.stringify(item).includes(value))
    setSelectedIndex(null)
    if(index !== -1) {
      setLayoutList(barChartAxesPro.filter(item => JSON.stringify(item).includes(value)))
    } else {
      alert('未找到匹配的图表')
      setLayoutList(barChartAxesPro)
    }
  }

  return (
    <Tester>
      <View style={styles.serachContainer}>
        <TextInput 
          style={styles.searchInput}
          placeholder='筛选图表属性'
          value={searchValue}
          onChangeText={setSearchValue}
          onSubmitEditing={() => handleSearch(searchValue.replaceAll(`"`,`'`))}
        />
      </View>
      <ScrollView>
        {
          layoutList.slice(0, 50).map((item, index) => {
            return (<TestCase itShould={JSON.stringify(item)} key={JSON.stringify(item)} tags={['C_API']}>
              {selectedIndex === index?
                <BarChart data={data}  {...item}></BarChart>
                : (<Button title='点击显示图表' onPress={() => setSelectedIndex(index)} />)
              }
            </TestCase>)
          })
        }
        <View style={{height:100}}></View>
      </ScrollView>
    </Tester >

  )
}

const styles = StyleSheet.create({
  serachContainer: {
    padding: 10,
    backgroundColor: '#f5f5f5'
  },
  searchInput: {
    height: 40,
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 5,
    paddingHorizontal: 10
  }
})